<template>
  <div>
    <el-dialog
      title="企业档案→企业详细信息→人员详情"
      :visible.sync="show"
      :before-close="close"
      width="80%"
      :append-to-body="true"
    >
      <div class="query-section">
        <el-form :inline="true" size="small">
          <el-form-item label="姓名">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="人员性质">
            <el-select
              v-model="queryParams.personnelType"
              placeholder="请选择"
              size="small"
              clearable
            >
              <el-option label="管理人员" value="管理人员"></el-option>
              <el-option label="技术人员" value="技术人员"></el-option>
              <el-option label="其他人员" value="其他人员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleQuery"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="loading"
        :data="personnelList"
        border
        stripe
        :key="1"
      >
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="60"
          fixed="left"
        ></el-table-column>
        <el-table-column
          label="人员姓名"
          align="center"
          prop="name"
          width="100"
        ></el-table-column>
        <el-table-column
          label="人员性质"
          align="center"
          prop="personnelType"
          width="120"
        ></el-table-column>
        <el-table-column
          label="性别"
          align="center"
          prop="gender"
          width="80"
        ></el-table-column>
        <el-table-column
          label="年龄"
          align="center"
          prop="age"
          width="80"
        ></el-table-column>
        <el-table-column
          label="最高学历"
          align="center"
          prop="education"
          width="100"
        ></el-table-column>
        <el-table-column
          label="职称"
          align="center"
          prop="title"
          width="100"
        ></el-table-column>
        <el-table-column
          label="持证名称"
          align="center"
          prop="certificateName"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="证件编号"
          align="center"
          prop="certificateNumber"
          width="150"
        ></el-table-column>
        <el-table-column
          label="发证单位"
          align="center"
          prop="issuePlace"
          width="120"
        ></el-table-column>
        <el-table-column
          label="任务单负责模块"
          align="center"
          prop="taskModule"
          width="150"
        ></el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        class="pagination-container"
      />

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="close" size="small"
          >取消</el-button
        >
        <el-button type="primary" @click="handleConfirm" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      queryParams: {
        name: "",
        personnelType: "",
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      personnelList: [
        {
          name: "张三三",
          personnelType: "管理人员",
          gender: "女",
          age: 30,
          education: "研究生",
          title: "经理",
          certificateName: "xxxx证书",
          certificateNumber: "345678624134S",
          issuePlace: "上海市",
          taskModule: "白蚁灭治",
        },
        {
          name: "张三三",
          personnelType: "技术人员",
          gender: "女",
          age: 30,
          education: "研究生",
          title: "员工",
          certificateName: "xxxx证书",
          certificateNumber: "345678624134S",
          issuePlace: "上海市",
          taskModule: "白蚁预防",
        },
        {
          name: "张三三",
          personnelType: "其他人员",
          gender: "女",
          age: 30,
          education: "研究生",
          title: "员工",
          certificateName: "xxxx证书",
          certificateNumber: "345678624134S",
          issuePlace: "上海市",
          taskModule: "其他",
        },
        {
          name: "张三三",
          personnelType: "管理人员",
          gender: "女",
          age: 30,
          education: "研究生",
          title: "经理",
          certificateName: "xxxx证书",
          certificateNumber: "345678624134S",
          issuePlace: "上海市",
          taskModule: "白蚁灭治",
        },
        {
          name: "张三三",
          personnelType: "管理人员",
          gender: "女",
          age: 30,
          education: "研究生",
          title: "经理",
          certificateName: "xxxx证书",
          certificateNumber: "345678624134S",
          issuePlace: "上海市",
          taskModule: "白蚁预防",
        },
        {
          name: "张三三",
          personnelType: "管理人员",
          gender: "女",
          age: 30,
          education: "研究生",
          title: "经理",
          certificateName: "xxxx证书",
          certificateNumber: "345678624134S",
          issuePlace: "上海市",
          taskModule: "白蚁灭治",
        },
        {
          name: "张三三",
          personnelType: "管理人员",
          gender: "女",
          age: 30,
          education: "研究生",
          title: "经理",
          certificateName: "xxxx证书",
          certificateNumber: "345678624134S",
          issuePlace: "上海市",
          taskModule: "其他",
        },
      ],
      total: 446,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    close() {
      this.$emit("closeMsg");
    },
    handleConfirm() {
      this.$emit("closeMsg");
    },
    getList() {
      this.loading = true;
      // TODO: 调用接口获取人员列表
      console.log("获取人员列表", this.queryParams);
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.query-section {
  margin-bottom: 15px;
}

.pagination-container {
  margin-top: 15px;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9e9ec;
}

::v-deep .el-dialog__footer {
  border-top: 1px solid #e9e9ec;
}

.dialog-footer {
  text-align: right;
}
</style>
